<template>
  <div id="admin">
    <div id="nav-left">
      <!-- 用户信息 -->
      <div id="user-box">
        <div id="user-info">
          <Avatar v-if="userInfo.src" :src="global.serviceUrl + userInfo.src" size="large"/>
          <Avatar v-else src="static/default/default.png" size="large"/>
          <p id="user-name">{{ userInfo.nickname }}</p>
        </div>
      </div>
      <!-- 左侧导航 -->
      <router-link v-for="(item,index) in adminList" :key="index" :to="item.url" class="nav-item">
        <Icon class="nav-icon" :type="item.icon"/>
        <span class="nav-text">{{ item.name }}</span>
      </router-link>
    </div>
    <div id="frames">
      <router-view/>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "Admin-view",
  data() {
    return {
      adminList: this.global.adminNavList
    };
  },
  computed: {
    ...mapState(["userInfo"])
  }
};
</script>
<style scoped>
#admin {
  height: 100%;
  display: flex;
  flex-direction: row;
  border-top: 2px solid #19be6b;
}
#nav-left {
  width: 200px;
  background-color: #515a6e;
  overflow-y: auto;
  position: relative;
  box-shadow: 2px 0 2px 2px #ccc;
}
#frames {
  flex: 1;
  overflow-y: auto;
  min-width: 600px;
}
/* 左侧菜单 */
#user-box {
  color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.ivu-avatar-large {
  width: 100px;
  height: 100px;
  line-height: 40px;
  border-radius: 50px;
}
#user-info {
  padding: 20px 0;
}
#user-name {
  font-size: 16px;
  text-align: center;
  line-height: 40px;
}
.nav-item {
  display: block;
  height: 40px;
  line-height: 40px;
  color: #fff;
  padding: 0 20px;
}
.nav-icon {
  font-size: 20px;
  position: relative;
  top: -4px;
}
.nav-text {
  font-size: 16px;
  padding: 0 10px;
  letter-spacing: 2px;
}
</style>


